@import "~scss/variables";

.sw-field {
    width: 100%;
    margin-bottom: var(--scale-size-32);

    .sw-ai-copilot-badge {
        height: var(--scale-size-18);
    }

    .sw-field__label {
        display: flex;
        line-height: 16px;
        font-size: var(--font-size-xs);
        margin-bottom: var(--scale-size-8);
        color: var(--color-text-primary-default);

        label {
            flex-grow: 1;
        }
    }

    .sw-field__label .is--required::after {
        content: "*";
        color: var(--color-text-brand-default);
    }

    .sw-field__inheritance-icon {
        margin-right: var(--scale-size-8);
    }

    .sw-field__button-restore {
        color: var(--color-text-primary-default);
        padding: 0 var(--scale-size-8);
        border: none;
        background: none;
        outline: none;
        -moz-appearance: none;
        -webkit-appearance: none;
        cursor: pointer;
    }

    .sw-field__help-text {
        align-self: center;
    }

    &.is--inherited {
        .sw-field__label {
            color: var(--color-text-accent-default);
        }
    }

    &.has--error {
        margin-bottom: var(--scale-size-12);

        .sw-field__label {
            color: var(--color-text-critical-default);
        }
    }

    &__hint {
        margin-top: var(--scale-size-4);
        font-size: var(--font-size-2xs);
        display: flex;
        align-items: center;
        gap: var(--scale-size-8);
    }
}
